<template>
  <div class="order-container">
    <!-- 返回按钮 -->
    <div class="back-btn">
      <button @click="goBack" class="btn-back">← 返回</button>
    </div>

    <!-- 订单标题 -->
    <div class="order-title">
      <h2>确认订单</h2>
    </div>

    <!-- 订单信息卡片 -->
    <div class="order-card">
      <!-- 商品信息 -->
      <div class="product-info">
        <img :src="product.image" alt="商品图片" class="product-img">
        <div class="product-details">
          <h3 class="product-title">{{ product.title }}</h3>
          <p class="product-price">¥{{ product.price.toFixed(2) }}</p>
          <div class="product-quantity">
            <span>数量: {{ product.quantity }}</span>
          </div>
        </div>
      </div>

      <!-- 分割线 -->
      <div class="divider"></div>

      <!-- 地址选择 -->
      <div class="address-section">
        <h3 class="section-title">收货地址</h3>
        <div v-if="addresses.length > 0" class="address-list">
          <div v-for="addr in addresses" :key="addr.id"
               :class="['address-item', selectedAddressId === addr.id ? 'active' : '']"
               @click="selectAddress(addr.id)">
            <div class="address-info">
              <p class="consignee">{{ addr.consignee }} {{ addr.phone }}</p>
              <p class="address-detail">{{ addr.province }}{{ addr.city }}{{ addr.district }}{{ addr.detailAddress }}</p>
            </div>
            <div class="address-selector">
              <i class="el-icon-check" v-if="selectedAddressId === addr.id"></i>
            </div>
          </div>
        </div>
        <div v-else class="no-address">
          <p>暂无收货地址，请添加新地址</p>
          <button @click="addNewAddress" class="btn-add-address">+ 添加新地址</button>
        </div>
      </div>

      <!-- 价格信息 -->
      <div class="price-info">
        <p><span>商品总价:</span> <span class="price">¥{{ (product.price * product.quantity).toFixed(2) }}</span></p>
        <p><span>运费:</span> <span class="price">¥0.00</span></p>
        <p class="total-price"><span>订单总价:</span> <span class="price">¥{{ (product.price * product.quantity).toFixed(2) }}</span></p>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <button @click="cancelOrder" class="btn-cancel">取消订单</button>
      <button @click="submitOrder" class="btn-pay">提交订单并支付</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import apis from '@/config/api-config.js';
import getResponse from '@/assets/js/http-client.js';

const router = useRouter();

// 订单商品信息 (实际项目中可通过路由参数或API获取)
const product = ref({
  id: 1,
  title: "示例商品标题",
  image: "src/assets/img/product/default.jpg",
  price: 99.99,
  quantity: 1
});

// 地址相关数据
const addresses = ref([]);
const selectedAddressId = ref(null);

// 页面加载时获取地址列表
onMounted(async () => {
  await fetchAddresses();
});

// 获取地址列表
const fetchAddresses = async () => {
  try {
    const result = await getResponse(apis.address.list.url, apis.address.list.type);
    if (result.code === 200) {
      addresses.value = result.data;
      // 默认选中第一个地址
      if (addresses.value.length > 0) {
        selectedAddressId.value = addresses.value[0].id;
      }
    } else {
      ElMessage.error(result.message);
    }
  } catch (error) {
    ElMessage.error("获取地址失败，请重试");
  }
};

// 选择地址
const selectAddress = (id) => {
  selectedAddressId.value = id;
};

// 添加新地址 (实际项目中可跳转到地址添加页或弹出模态框)
const addNewAddress = () => {
  router.push('/member/address/add');
};

// 提交订单
const submitOrder = () => {
  if (!selectedAddressId.value) {
    ElMessage.warning("请选择收货地址");
    return;
  }

  // 这里添加提交订单逻辑
  ElMessage.success("订单提交成功，跳转到支付页面");
  // router.push('/order/pay');
};

// 取消订单
const cancelOrder = () => {
  if (confirm("确定要取消订单吗？")) {
    router.go(-1);
  }
};

// 返回上一页
const goBack = () => {
  router.go(-1);
};
</script>

<style scoped>
.order-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.back-btn {
  margin-bottom: 20px;
}

.btn-back {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.order-title {
  text-align: center;
  margin-bottom: 30px;
}

.order-title h2 {
  font-size: 24px;
  color: #333;
}

.order-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 30px;
}

.product-info {
  display: flex;
  margin-bottom: 20px;
}

.product-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 20px;
}

.product-details {
  flex: 1;
}

.product-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.product-price {
  font-size: 16px;
  color: #f56c6c;
  margin-bottom: 10px;
}

.product-quantity {
  color: #666;
}

.divider {
  height: 1px;
  background: #eee;
  margin: 20px 0;
}

.section-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.address-list {
  margin-bottom: 20px;
}

.address-item {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.address-item.active {
  border-color: #409eff;
  background-color: #f0f7ff;
}

.consignee {
  font-weight: 500;
  margin-bottom: 5px;
}

.address-detail {
  color: #666;
  line-height: 1.5;
}

.address-selector {
  color: #409eff;
}

.no-address {
  text-align: center;
  padding: 30px 0;
  color: #999;
}

.btn-add-address {
  margin-top: 10px;
  padding: 8px 16px;
  background: #f5f5f5;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
}

.price-info {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  text-align: right;
}

.price-info p {
  margin-bottom: 10px;
  color: #666;
}

.price-info .price {
  color: #f56c6c;
  font-weight: 500;
}

.total-price {
  font-size: 18px;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.btn-cancel, .btn-pay {
  padding: 12px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  border: none;
}

.btn-cancel {
  background: #f5f5f5;
  color: #666;
}

.btn-pay {
  background: #409eff;
  color: #fff;
}

.btn-pay:hover {
  background: #3391e8;
}
</style>